<template>
  <view class="support-page">
    <!-- 状态栏占位 -->
    <view class="status-bar"></view>
    
    <!-- 头部 -->
    <view class="header">
      <view class="header-content">
        <view class="back-btn" @tap="goBack">
          <text class="back-icon">←</text>
        </view>
        <view class="header-title">
          <text class="title-text">服务支持</text>
          <text class="subtitle-text">SERVICE SUPPORT</text>
        </view>
        <view class="header-placeholder"></view>
      </view>
    </view>

    <!-- 快速联系 -->
    <view class="quick-contact">
      <view class="contact-card">
        <view class="contact-icon">
          <text class="icon">💬</text>
        </view>
        <view class="contact-info">
          <text class="contact-title">在线客服</text>
          <text class="contact-desc">7×24小时为您服务</text>
        </view>
        <view class="contact-action" @tap="openOnlineService">
          <text class="action-text">立即咨询</text>
        </view>
      </view>
    </view>

    <!-- 服务功能 -->
    <view class="service-section">
      <view class="section-title">
        <view class="title-left">
          <view class="title-line"></view>
          <text class="title-text">服务功能</text>
        </view>
      </view>
      
      <view class="service-grid">
        <view class="service-item" @tap="openFAQ">
          <view class="service-icon faq-icon">
            <text class="icon">❓</text>
          </view>
          <text class="service-title">常见问题</text>
          <text class="service-desc">FAQ解答</text>
        </view>
        
        <view class="service-item" @tap="openFeedback">
          <view class="service-icon feedback-icon">
            <text class="icon">📝</text>
          </view>
          <text class="service-title">意见反馈</text>
          <text class="service-desc">问题建议</text>
        </view>
        
        <view class="service-item" @tap="openHelp">
          <view class="service-icon help-icon">
            <text class="icon">📖</text>
          </view>
          <text class="service-title">使用帮助</text>
          <text class="service-desc">操作指南</text>
        </view>
        
        <view class="service-item" @tap="openReport">
          <view class="service-icon report-icon">
            <text class="icon">🐛</text>
          </view>
          <text class="service-title">问题报告</text>
          <text class="service-desc">Bug反馈</text>
        </view>
      </view>
    </view>

    <!-- 常见问题预览 -->
    <view class="faq-preview">
      <view class="section-title">
        <view class="title-left">
          <view class="title-line"></view>
          <text class="title-text">常见问题</text>
        </view>
        <text class="more-btn" @tap="openFAQ">查看全部</text>
      </view>
      
      <view class="faq-list">
        <view 
          v-for="(faq, index) in faqList" 
          :key="index" 
          class="faq-item"
          @tap="toggleFAQ(index)"
        >
          <view class="faq-question">
            <text class="question-text">{{ faq.question }}</text>
            <text class="expand-icon" :class="{ 'expanded': faq.expanded }">▼</text>
          </view>
          <view v-if="faq.expanded" class="faq-answer">
            <text class="answer-text">{{ faq.answer }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 联系方式 -->
    <view class="contact-section">
      <view class="section-title">
        <view class="title-left">
          <view class="title-line"></view>
          <text class="title-text">联系我们</text>
        </view>
      </view>
      
      <view class="contact-list">
        <view class="contact-item" @tap="callPhone">
          <view class="contact-icon-small">
            <text class="icon">📞</text>
          </view>
          <view class="contact-detail">
            <text class="contact-label">客服热线</text>
            <text class="contact-value">13187308227</text>
          </view>
          <text class="contact-arrow">→</text>
        </view>
        
        <view class="contact-item" @tap="sendEmail">
          <view class="contact-icon-small">
            <text class="icon">📧</text>
          </view>
          <view class="contact-detail">
            <text class="contact-label">邮箱支持</text>
            <text class="contact-value">13187308227@163.com</text>
          </view>
          <text class="contact-arrow">→</text>
        </view>
        
        <view class="contact-item" @tap="openWorkTime">
          <view class="contact-icon-small">
            <text class="icon">🕐</text>
          </view>
          <view class="contact-detail">
            <text class="contact-label">服务时间</text>
            <text class="contact-value">周一至周日 9:00-21:00</text>
          </view>
          <text class="contact-arrow">→</text>
        </view>
      </view>
    </view>

    <!-- 自定义反馈弹窗 -->
    <view v-if="showFeedbackModal" class="modal-mask" @tap.stop="closeFeedback">
      <view class="feedback-modal" @tap.stop>
        <view class="modal-header">
          <text class="modal-title">意见反馈</text>
          <text class="modal-close" @tap="closeFeedback">✕</text>
        </view>
        <view class="modal-content">
          <view class="feedback-type">
            <text class="type-label">反馈类型</text>
            <view class="type-options">
              <view 
                v-for="type in feedbackTypes" 
                :key="type.value"
                class="type-option"
                :class="{ 'active': selectedType === type.value }"
                @tap="selectType(type.value)"
              >
                <text class="type-text">{{ type.label }}</text>
              </view>
            </view>
          </view>
          
          <view class="feedback-content">
            <text class="content-label">问题描述</text>
            <textarea 
              v-model="feedbackContent"
              class="content-input"
              placeholder="请详细描述您遇到的问题或建议..."
              maxlength="500"
            ></textarea>
            <text class="content-count">{{ feedbackContent.length }}/500</text>
          </view>
          
          <view class="feedback-contact">
            <text class="contact-label">联系方式（选填）</text>
            <input 
              v-model="feedbackContact"
              class="contact-input"
              placeholder="手机号或邮箱，便于我们联系您"
            />
          </view>
        </view>
        <view class="modal-footer">
          <view class="footer-btn cancel-btn" @tap="closeFeedback">
            <text class="btn-text">取消</text>
          </view>
          <view class="footer-btn submit-btn" @tap="submitFeedback">
            <text class="btn-text">提交</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 自定义帮助文档弹窗 -->
    <view v-if="showHelpModal" class="modal-mask" @tap.stop="closeHelp">
      <view class="help-modal" @tap.stop>
        <view class="modal-header">
          <text class="modal-title">使用帮助</text>
          <text class="modal-close" @tap="closeHelp">✕</text>
        </view>
        <scroll-view class="help-content" scroll-y="true">
          <view class="help-section">
            <text class="help-title">快速开始</text>
            <text class="help-text">1. 点击首页"立即诊断"按钮开始网络检测</text>
            <text class="help-text">2. 等待诊断完成，查看网络状态报告</text>
            <text class="help-text">3. 根据建议优化网络设置</text>
          </view>
          
          <view class="help-section">
            <text class="help-title">功能说明</text>
            <text class="help-text">• 网络故障排查：检测网络连接问题</text>
            <text class="help-text">• Wi-Fi优化：优化无线网络设置</text>
            <text class="help-text">• 连接稳定性：测试网络稳定性</text>
            <text class="help-text">• 历史记录：查看诊断历史</text>
          </view>
          
          <view class="help-section">
            <text class="help-title">常见问题</text>
            <text class="help-text">Q: 诊断需要多长时间？</text>
            <text class="help-text">A: 通常需要30-60秒完成全面诊断</text>
            <text class="help-text">Q: 诊断会消耗流量吗？</text>
            <text class="help-text">A: 会消耗少量流量用于网络测试</text>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
// 自定义弹窗状态
const showFeedbackModal = ref(false)
const showHelpModal = ref(false)

// 反馈相关数据
const selectedType = ref('bug')
const feedbackContent = ref('')
const feedbackContact = ref('')

const feedbackTypes = [
  { label: '功能异常', value: 'bug' },
  { label: '功能建议', value: 'suggestion' },
  { label: '界面问题', value: 'ui' },
  { label: '其他问题', value: 'other' }
]

// FAQ数据
const faqList = ref([
  {
    question: '为什么诊断结果显示网络异常？',
    answer: '可能是网络连接不稳定、信号弱或设备设置问题。建议检查网络连接，重启路由器或联系网络服务商。',
    expanded: false
  },
  {
    question: '如何提高网络速度？',
    answer: '1. 检查网络套餐是否足够；2. 优化Wi-Fi信道设置；3. 减少同时连接设备数量；4. 更新路由器固件。',
    expanded: false
  },
  {
    question: '诊断记录可以保存多久？',
    answer: '诊断记录默认保存30天，超过时间的记录会自动清理。您可以在设置中调整保存时长。',
    expanded: false
  }
])

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 打开在线客服
const openOnlineService = () => {
  uni.showModal({
    title: '在线客服',
    content: '即将跳转到在线客服页面',
    confirmText: '确定',
    cancelText: '取消',
    success: (res) => {
      if (res.confirm) {
        uni.showToast({
          title: '正在连接客服...',
          icon: 'loading'
        })
      }
    }
  })
}

// 打开FAQ
const openFAQ = () => {
  uni.showToast({
    title: '跳转到FAQ页面',
    icon: 'none'
  })
}

// 打开反馈
const openFeedback = () => {
  showFeedbackModal.value = true
}

// 关闭反馈
const closeFeedback = () => {
  showFeedbackModal.value = false
  // 重置表单
  selectedType.value = 'bug'
  feedbackContent.value = ''
  feedbackContact.value = ''
}

// 选择反馈类型
const selectType = (type) => {
  selectedType.value = type
}

// 提交反馈
const submitFeedback = () => {
  if (!feedbackContent.value.trim()) {
    uni.showToast({
      title: '请填写问题描述',
      icon: 'error'
    })
    return
  }
  
  uni.showLoading({
    title: '提交中...'
  })
  
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '提交成功',
      icon: 'success'
    })
    closeFeedback()
  }, 1500)
}

// 打开帮助
const openHelp = () => {
  showHelpModal.value = true
}

// 关闭帮助
const closeHelp = () => {
  showHelpModal.value = false
}

// 打开问题报告
const openReport = () => {
  uni.showToast({
    title: '跳转到问题报告页面',
    icon: 'none'
  })
}

// 切换FAQ展开状态
const toggleFAQ = (index) => {
  faqList.value[index].expanded = !faqList.value[index].expanded
}

// 拨打电话
const callPhone = () => {
  uni.makePhoneCall({
    phoneNumber: '13187308227'
  })
}

// 发送邮件
const sendEmail = () => {
  uni.showModal({
    title: '邮箱支持',
    content: '13187308227@163.com\n\n是否复制邮箱地址？',
    confirmText: '复制',
    cancelText: '取消',
    success: (res) => {
      if (res.confirm) {
        uni.setClipboardData({
          data: '13187308227@163.com',
          success: () => {
            uni.showToast({
              title: '邮箱已复制',
              icon: 'success'
            })
          }
        })
      }
    }
  })
}

// 查看工作时间
const openWorkTime = () => {
  uni.showModal({
    title: '服务时间',
    content: '周一至周日 9:00-21:00\n\n节假日正常服务',
    showCancel: false,
    confirmText: '知道了'
  })
}
</script>

<style scoped>
.support-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #000000 0%, #1a0a2e 50%, #16213e 100%);
  color: #ffffff;
  padding-bottom: 20px;
}

.status-bar {
  height: 44px;
  background: transparent;
}

.header {
  padding: 0 20px 20px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.back-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.back-icon {
  font-size: 20px;
  color: #ffffff;
}

.header-title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-text {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
}

.subtitle-text {
  font-size: 12px;
  color: #888888;
}

.header-placeholder {
  width: 40px;
}

.quick-contact {
  padding: 0 20px 20px;
}

.contact-card {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-icon .icon {
  font-size: 24px;
}

.contact-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-title {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
}

.contact-desc {
  font-size: 14px;
  color: #cccccc;
}

.contact-action {
  padding: 8px 16px;
  background: linear-gradient(135deg, #00ffff 0%, #0080ff 100%);
  border-radius: 20px;
}

.action-text {
  font-size: 14px;
  font-weight: bold;
  color: #000000;
}

.service-section {
  padding: 0 20px 30px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-line {
  width: 4px;
  height: 20px;
  background: linear-gradient(180deg, #ff6b6b 0%, #4ecdc4 100%);
  border-radius: 2px;
}

.title-text {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
}

.more-btn {
  font-size: 14px;
  color: #00ffff;
}

.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.service-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.service-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.faq-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.feedback-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.help-icon {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.report-icon {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.service-icon .icon {
  font-size: 24px;
}

.service-title {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
}

.service-desc {
  font-size: 12px;
  color: #cccccc;
  text-align: center;
}

.faq-preview {
  padding: 0 20px 30px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.faq-question {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.question-text {
  font-size: 14px;
  color: #ffffff;
  flex: 1;
}

.expand-icon {
  font-size: 12px;
  color: #888888;
  transition: transform 0.3s ease;
}

.expand-icon.expanded {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.answer-text {
  font-size: 14px;
  color: #cccccc;
  line-height: 1.5;
}

.contact-section {
  padding: 0 20px;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-icon-small {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-icon-small .icon {
  font-size: 18px;
}

.contact-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-label {
  font-size: 14px;
  color: #cccccc;
}

.contact-value {
  font-size: 16px;
  color: #ffffff;
  font-weight: bold;
}

.contact-arrow {
  font-size: 16px;
  color: #888888;
}

/* 自定义弹窗样式 */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 105vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  padding: 20px;
  box-sizing: border-box;
}

.feedback-modal {
  width: 90%;
  max-width: 400px;
  background: #1a1a1a;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
  margin: auto;
  position: relative;
}

.help-modal {
  width: 90%;
  max-width: 400px;
  background: #1a1a1a;
  border-radius: 16px;
  max-height: 80vh;
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
  margin: auto;
  position: relative;
}

.modal-header {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-title {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
}

.modal-close {
  font-size: 20px;
  color: #888888;
  padding: 4px;
}

.modal-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: 50vh;
  overflow-y: auto;
}

.feedback-type {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.type-label {
  font-size: 14px;
  color: #cccccc;
}

.type-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.type-option {
  padding: 6px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.type-option.active {
  background: linear-gradient(135deg, #00ffff 0%, #0080ff 100%);
  border-color: #00ffff;
}

.type-option.active .type-text {
  color: #000000;
  font-weight: bold;
}

.type-text {
  font-size: 12px;
  color: #ffffff;
}

.feedback-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.content-label {
  font-size: 14px;
  color: #cccccc;
}

.content-input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 12px;
  color: #ffffff;
  font-size: 14px;
  min-height: 80px;
}

.content-count {
  font-size: 12px;
  color: #888888;
  text-align: right;
}

.feedback-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 12px;
  color: #ffffff;
  font-size: 14px;
}

.modal-footer {
  padding: 20px;
  display: flex;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-btn {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
}

.cancel-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.submit-btn {
  background: linear-gradient(135deg, #00ffff 0%, #0080ff 100%);
}

.submit-btn .btn-text {
  color: #000000;
  font-weight: bold;
}

.btn-text {
  font-size: 16px;
  color: #ffffff;
}

.help-content {
  padding: 20px;
  max-height: 60vh;
}

.help-section {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.help-title {
  font-size: 16px;
  font-weight: bold;
  color: #00ffff;
  margin-bottom: 8px;
}

.help-text {
  font-size: 14px;
  color: #cccccc;
  line-height: 1.5;
}

@media screen and (max-width: 375px) {
  .feedback-modal,
  .help-modal {
    width: 95%;
    margin: 10px;
  }
  
  .modal-content {
    padding: 15px;
    gap: 15px;
  }
  
  .modal-header,
  .modal-footer {
    padding: 15px;
  }
}
</style>